<!--公司主页111-->
<template>
  <div class="container">
    <!-- 顶部导航栏 -->
    <GeneralTopBar :showPosition="false"/>
    <main>
      <div class="company-header">
        <div class="company-box margin-20per">
          <div class="company-wrapper">
            <img :src="!companyLogo ? require('@/image/illustration/company_logo.png') : company.companyLogo"
                 :alt="this.company.companyName"
                 style="width: 164px; height: 164px;"/>
            <div class="company-primary">
              <h1 class="company-name">{{ this.company.companyName}}</h1>
              <p> {{"公司电话:"+ this.company.companyTel }}</p>
              <p> {{ " 公司电子邮件:"+this.company.companyEmail }}</p>


              <!--              <div class="company-info">-->
              <!--                <div class="info-wrapper">-->
              <!--                  <el-link>{{ company.job_total }}个</el-link>-->
              <!--                  <p>招聘职位</p>-->
              <!--                </div>-->
              <!--                <div class="info-wrapper">-->
              <!--                  <el-link>{{ company.resume_feedback }}%</el-link>-->
              <!--                  <p>简历反馈率</p>-->
              <!--                </div>-->
              <!--                <div class="info-wrapper">-->
              <!--                  <el-link>{{ company.evaluation_total }}个</el-link>-->
              <!--                  <p>面试评价</p>-->
              <!--                </div>-->
              <!--                <div class="info-wrapper">-->
              <!--                  <el-link>{{ company.login_date}}</el-link>-->
              <!--                  <p>企业最近登录</p>-->
              <!--                </div>-->
              <!--              </div>-->
            </div>
            <div class="user-share">
              <span>分享</span>
              <span><i class="el-icon-weixin"></i></span>
            </div>
          </div>
        </div>
        <!--        <div class="company-tab margin-20per">-->
        <!--          <el-link :href="'/company/detail?company_id=' + company.company_id" :class="{'is-active': $route.path === '/company/detail'}">公司主页</el-link>-->
        <!--          <el-link :href="'/company/job?company_id=' + company.company_id" :class="{'is-active': $route.path === '/company/job'}">在招职位</el-link>-->
        <!--          <el-link :href="'/company/evaluation?company_id=' + company.company_id" :class="{'is-active': $route.path === '/company/evaluation'}">面试评价</el-link>-->
        <!--        </div>-->
      </div>
      <div class="company-main margin-20per">
        <aside ref="aside">
          <div class="company-info">
            <h3>基本信息</h3>
            <p>
              <a>经营状态:</a>
              <span>{{ this.company.operatingState }}</span>
            </p>
            <p>
              <a>融资阶段:</a>
              <span>{{ company.financingStage.title }}</span>
            </p>
            <p>
              <a>成立时间:</a>
              <span>{{ this.company.setUpTime }}</span>
            </p>
            <p>
              <a>公司规模:</a>
              <span>{{ this.company.companyScale.title }}</span>
            </p>
            <p>
              <a>所属地区:</a>
              <span>{{ this.company.eachDistrict }}</span>
            </p>
            <p>
              <a>企业名称:</a>
              <span>{{ company.firmName }}</span>
            </p>
            <p>
              <a>法定代表人:</a>
              <span>{{ company.legalRepresentative }}</span>
            </p>
            <p>
              <a>企业编码:</a>
              <span>{{ company.companyCode }}</span>
            </p>
            <p>
              <a>注册资本:</a>
              <span>{{ this.company.registeredCapital }}</span>
            </p>
            <p>
              <a>公司行业类型:</a>
              <span>{{ this.company.companyType.title }}</span>
            </p>
            <p>
              <a>注册地址:</a>
              <span>{{ company.registeredAddress }}</span>
            </p>
            <p>
              <a>企业类型:</a>
              <span>{{ this.company.companyTypeTitle }}</span>
            </p>
          </div>
          <div class="company-job">
            <h3>在招职位</h3>
            <ul>
              <li v-for="(rej) in this.RecruitmentPost" :key="rej.id ">
                <el-link class="job-duty" :title="rej.title"
                         :href="'/profession/detail?job_id=' + rej.id"
                > {{ rej.title }}
                </el-link>
                <p class="job-salary">{{ rej.expectedSalary.title }}</p>
                <p class="job-request">
                  <span>{{ rej.address.title}}</span>
                  <el-divider direction="vertical"></el-divider>
                  <span>{{ rej.workExperience.title }}</span>
                  <el-divider direction="vertical"></el-divider>
                  <span>{{ rej.recruitmentEducation.title }}</span>
                </p>
              </li>
            </ul>
            <el-link :href="'/company/job?company_id=' + this.$route.query.company_id"
                     class="show-more"
            >查看更多职位<i class="el-icon-arrow-right"></i>
            </el-link>
          </div>
        </aside>
        <div class="company-introduce" ref="company_introduce">
          <div class="company-introduction">
            <h3>公司简介</h3>
            <div class="content" v-if="this.company.companyProfile">
              <p> {{ this.company.companyProfile }}</p>
            </div>
          </div>
          <div class="company-introduction">
            <h3>人才发展趋势</h3>
            <div class="content" v-if="this.company.developmentTrend">
              <p> {{ this.company.developmentTrend }}</p>
            </div>
          </div>
          <div class="company-introduction">
            <h3>与官方合作时间</h3>
            <div class="content" v-if="this.company.contractExpirationDate">
              <p> {{ this.company.contractExpirationDate }}</p>
            </div>
          </div>

          <div class="company-introduction">
            <h3>经营范围</h3>
            <div class="content" v-if="this.company.scopeBusiness">
              <p> {{ this.company.scopeBusiness }}</p>
            </div>
          </div>
          <div class="company-introduction">
            <h3>营业期限</h3>
            <div class="content" v-if="this.company.businessTerm">
              <p> {{ this.company.businessTerm }}</p>
            </div>
          </div>
          <div class="company-introduction">
            <h3>公司规模</h3>
            <div class="content" v-if="this.company.companyType.title">
              <p> {{ this.company.companyScale.title }}</p>
            </div>
          </div>
          <div class="company-introduction">
            <h3>所属行业</h3>
            <div class="content" v-if="this.company.subordinateToIndustry">
              <p> {{ this.company.subordinateToIndustry }}</p>
            </div>
          </div>
          <div class="company-introduction">
            <h3>负责人和负责人电话</h3>
            <div class="content" v-if="this.company.contactPerson">
              <p> {{ this.company.contactPerson }}</p>
            </div>
            <div class="content" v-if="this.company.contactPersonTel">
              <p> {{ this.company.contactPersonTel }}</p>
            </div>
          </div>
          <div class="company-introduction">
            <h3>统一社会信用代码</h3>
            <div class="content" v-if="this.company.unifiedSocialCreditCode">
              <p> {{ this.company.unifiedSocialCreditCode }}</p>
            </div>
          </div>
          <div class="company-address">
            <h3>公司位置</h3>
            <div class="content">
              <Map :address="company.detailsaAddress" v-if="company.detailsaAddress"/>
            </div>
          </div>

          <div class="company-recruiter">
            <h3>公司热门招聘官</h3>
            <div class="content">
              <dl>
                <dd v-for="(rec) in this.Publisher" :key="rec.id ">
                  <img :src="rec.face" :alt="rec.name"

                       style="width: 60px; height: 60px; border-radius: 50%"/>
                  <div class="recruiter-info">
                    <h2>{{rec.standbyName}}</h2>
                    <p>{{ rec.capacity }}</p>
                  </div>
                </dd>
              </dl>
            </div>
          </div>

          <InterviewEvaluation :showMoreBtn="true" :isCompany="true"/>
        </div>
      </div>
    </main>
    <!-- 底部信息栏 -->
    <GeneralFooter />
  </div>
</template>
<script>
  import GeneralTopBar from "../../../components/GeneralTopBar";
  import GeneralFooter from "../../../components/GeneralFooter";
  import Map from "../../../components/Map.vue";
  import InterviewEvaluation from "../widgets/InterviewEvaluation.vue";
  import setMinHeight from "@/utils/setMinHeight";
  export default {
    name: "CompanyDetail",
    components: {GeneralTopBar, GeneralFooter, Map, InterviewEvaluation},
    data() {
      return {
        company:{},
        Publisher: [],        //人事
        RecruitmentPost: [], // 招聘的工作    右侧
      }
    },
    mounted() {
      // 设置页面主内容最小高度
      setMinHeight(this, this.$refs.company_introduce);
    },
    created() {
      this.initData()
      // console.log(this.$route.query.company_id+"+++++++++++++++")
    },
    methods: {
      async initData() {
        //获取公司信息
        let getCompany = async () => {
          const res = await this.$axios.request({
            url: `/web/company/selectOne`,
            method: "get",
            params:{
              companyId:this.$route.query.company_id
            }
          });
          console.log(res);
          if(res){
            this.company=res.data.data;
          }
        };

        let getPublisher = async () => {
          const rec = await this.$axios.request({
            url: `/web/Publisher/searchPublisher`,
            method: "get",
            params:{
              companyId:this.$route.query.company_id
            }
          });
          if(rec){
            this.Publisher=rec.data.data;
          }
        };
        let getRecruitmentPost = async () => {
          const rej = await this.$axios.request({
            url: `/web/recruitmentPost/searchRecruitmentPost`,
            method: "get",
            params:{
              companyId:this.$route.query.company_id
            }
          });
          console.log(rej);
          if(rej){
            this.RecruitmentPost=rej.data.recruitmentPostList;

          }
        };

        await this.$axios.all([getCompany(),getPublisher(),getRecruitmentPost()]);
      },

      filter(data) {
        return data;
      },
      mounted() {
        let id = this.$route.query.company_id               // 定义公司ID
        this.getCompanyInfo(id)
      },
    },
  }
</script>

<style lang="less" scoped>
  .el-link-active{
    transition: .3s;
    &:hover{
      color: @mainColor;
    }
    &:active{
      color: @activeColor;
    }
  }
  .show-more-active{
    color: @mainColor;
    transition: .3s;
    &:hover{
      color: @activeColor;
    }
    &:active{
      color: #16a085;
    }
  }
  .text-overflow{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  @mainColor: #5dd5c8;
  @activeColor: #00c2b3;
  @background: #f6f6f8;
  @fontColor: #61687c;
  @salaryColor: #fb670f;
  @promptColor: #8d92a1;
  @borderColor: #dcdfe6;
  .container{
    background: #fff;
  }
  main{
    .company-header{
      background: @background;
      padding-top: 30px;
      overflow: hidden;
      .company-box{
        background: #fff;
        padding: 10px 20px;
        .company-wrapper{
          position: relative;
          img{
            float: left;
          }
          .company-primary{
            height: 164px;
            margin-left: 180px;
            padding: 16px 0;
            h1{
              font-size: 32px;
              font-weight: 500;
            }
            > p{
              font-size: 16px;
              line-height: 50px;
            }
            .company-info{
              .info-wrapper{
                display: inline-block;
                padding: 0 36px;
                position: relative;
                &:first-of-type{
                  padding-left: 8px;
                }
                &:last-of-type::after{
                  display: none;
                }
                &::after{
                  content: "";
                  display: inline-block;
                  width: 1px;
                  height: 40px;
                  background: @borderColor;
                  position: absolute;
                  top: 4px;
                  right: 0;
                }
                .el-link{
                  font-size: 21px;
                  font-weight: 500;
                  display: flex;
                  color: @fontColor;
                  .el-link-active();
                }
                p{
                  color: @promptColor;
                }
              }
            }
          }
          .user-share{
            color: @promptColor;
            line-height: 36px;
            position: absolute;
            bottom: 0;
            right: 0;
            font-size: 15px;
            span + span{
              margin: 0 10px 0 16px;
              .el-link-active();
              cursor: pointer;
            }
          }
        }
      }
      .company-tab{
        margin-top: 20px;
        margin-bottom: 20px;
        padding-left: 20px;
        .el-link{
          width: 160px;
          padding: 8px 0;
          font-size: 16px;
          &.is-active{
            color: #fff;
            background: @mainColor;
            &:hover,&:focus{
              color: #fff;
              background: @activeColor;
              opacity: .8;
            }
            &:active{
              opacity: 1;
            }
          }
          color: @promptColor;
          .el-link-active();
        }
      }
    }
    .company-main{
      aside{
        width: 300px;
        float: right;
        margin-bottom: 100px;
        padding-left: 40px;
        > div + div{
          margin-top: 40px;
        }
        h3{
          font-size: 18px;
          padding-bottom: 15px;
          border-bottom: 1px solid @borderColor;
          margin-bottom: 25px;
        }
        .company-info{
          margin-top: 40px;
          p{
            display: flex;
            margin-bottom: 25px;
            font-size: 16px;
            i{
              font-size: 22px;
              margin-right: 16px;
              margin-left: 12px;
            }
            span{
              display: inline-block;
              position: relative;
              bottom: 2px;
              max-width: 210px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
        .company-job{
          ul li{
            margin-top: 25px;
            padding-bottom: 25px;
            border-bottom: 1px dashed @borderColor;
            font-size: 16px;
            .job-duty{
              font-size: inherit;
              color: @fontColor;
              display: inline-block;
              max-width: 130px;
              .text-overflow();
              .el-link-active();
            }
            .job-salary{
              display: inline-block;
              float: right;
              color: @salaryColor;
            }
            .job-request{
              color: @promptColor;
              font-size: 13px;
              margin-top: 8px;
            }
          }
          .show-more{
            color: @fontColor;
            .el-link-active();
            background: @background;
            width: 100%;
            padding: 10px 0;
            margin-top: 20px;
            i{
              margin-left: 12px;
            }
          }
        }
      }
      .company-introduce{
        padding: 40px 40px 100px 20px;
        border-right: 20px solid @background;
        margin-right: 300px;
        > div + div{
          margin-top: 50px;
        }
        h3{
          margin-bottom: 30px;
          font-size: 18px;
          font-weight: bold;
          padding-bottom: 16px;
          position: relative;
          &::after{
            content: "";
            display: block;
            width: 24px;
            height: 2px;
            border-radius: 3px;
            background: @mainColor;
            position: absolute;
            left: 0;
            bottom: 0;
          }
        }
        .company-introduction{
          .content p{
            line-height: 32px;
          }
        }
        .company-recruiter{
          .content{
            dl {
              display: flex;
              dd{
                display: flex;
                flex-wrap: wrap;
                margin-right: 60px;
                .recruiter-info{
                  margin-left: 16px;
                  white-space: nowrap;
                  h2{
                    font-size: 20px;
                    font-weight: normal;
                  }
                  p{
                    color: @promptColor;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  footer{
    background: @background;
    margin-top: 0;
  }
</style>